<!-- 确认订单页面组件
 -->
<template>
  <div class="confirmOrder">
    <!-- 头部 -->
    <div class="confirmOrder-header">
      <div class="header-content">
        <p>
          <i class="el-icon-s-order"></i>
        </p>
        <p>确认订单</p>
        <router-link to></router-link>
      </div>
    </div>
    <!-- 头部END -->

    <!-- 主要内容容器 -->
    <div class="content">
      <!-- 选择地址 -->
      <div class="section-address">
        <p class="title">收货地址</p>
        <div class="address-body">
          <ul>
            <li
              :class="item.id === confirmAddress ? 'in-section' : ''"
              v-for="item in address"
              :key="item.id"
              @click="handle(item.id)"
            >
              <h2>{{item.username}}</h2>
              <p class="phone">{{item.telephone}}</p>
              <p class="address">{{item.city.join(" ")}}</p>
              <p class="address">{{item.detailAddress}}</p>
            </li>
            <li class="add-address" @click="dialogAddVisible = true">
              <i class="el-icon-circle-plus-outline"></i>
              <p>添加新地址</p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 选择地址END -->

      <!-- 商品 -->
      <div class="section-goods">
        <p class="title">商品</p>
        <div class="goods-list">
          <ul>
            <li v-for="item in getBuyGoodsList" :key="item.id">
              <img style="height:100px;width:120px" :src="item.skuImg" />
              <span class="pro-name">{{item.skuName}}</span>
              <span class="pro-price">{{item.price}} x {{item.count}}</span>
              <!-- <span class="pro-status"></span> -->
              <span class="pro-total">{{item.price * item.count}}元</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 商品END -->

      <!-- 配送方式 -->
      <div class="section-shipment">
        <p class="title">配送方式</p>
        <p class="shipment">包邮</p>
      </div>
      <!-- 配送方式END -->
      <!-- 结算列表 -->
      <div class="section-count">
        <div class="money-box">
          <ul>
            <li class="total">
              <span class="title">应付总额：</span>
              <span class="value">
                <span class="total-price">{{getTotalPrice}}</span>元
              </span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 结算列表END -->

      <!-- 结算导航 -->
      <div class="section-bar">
        <div class="btn">
          <router-link to="/shoppingCart" class="btn-base btn-return">返回购物车</router-link>
          <a href="javascript:void(0);" @click="getUpOrder" class="btn-base btn-primary">结算</a>
        </div>
      </div>
      <!-- 结算导航END -->
    </div>
    <!-- 主要内容容器END -->
    <!-- 支付弹框 -->
    <el-dialog
      title="请用支付宝扫码支付"
      :visible.sync="payDialogVisible"
      width="18%"
      center>
      <div>
        <img src="../assets/imgs/erweima.jpg" style="height=200px;width:200px" alt="">
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="toOrder">取 消</el-button>
        <el-button type="primary" @click="toOrder">我已支付</el-button>
      </span>
    </el-dialog>
    <!-- 添加地址窗口 -->
     <el-dialog title="添加地址" :visible.sync ="dialogAddVisible">
    <el-form
      :model="addressInfo"
      ref="addressInfo"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm addressUpdate"
    >
      <el-form-item label="姓名" prop="username">
        <el-input style="width: 400px" v-model="addressInfo.username"></el-input>
      </el-form-item>
      <el-form-item style="width: 500px" label="手机号" prop="telephone">
        <el-input v-model="addressInfo.telephone"></el-input>
      </el-form-item>
      <el-form-item style="width: 500px" label="城市" prop="placeholders">
          <VDistpicker v-model="placeholders" @selected="selectCity"></VDistpicker>
      </el-form-item>
      <el-form-item style="width: 500px" label="详细地址" prop="detailAddress">
        <el-input v-model="addressInfo.detailAddress"></el-input>
      </el-form-item>
     
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="changDdialogAddVisible">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import VDistpicker from 'v-distpicker'
import { mapGetters ,mapActions} from "vuex";
import cookie from "js-cookie";
// import { mapActions } from "vuex";
export default {
  name: "",
  data() {
    return {
      //
      confirmAddress: 1, // 选择的地址id
      // 支付弹框
      payDialogVisible:false,
       // 级联城市
       placeholders: {
          province: '------- 省 --------',
          city: '--- 市 ---',
          area: '--- 区 ---',
      },
      // 地址列表
      address: [],
      rules: {
        username: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        nadetailAddress: [{ required: true, message: "地址不能为空", trigger: "blur" }],
        placeholders: [{ required: true, message: "城市不能为空", trigger: "blur" }],
        detailAddress: [{ required: true, message: "收获地址不能为空", trigger: "blur" }],
        telephone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: "请输入合法手机号/电话号",
            trigger: "blur",
          },
        ],
      },
      dialogAddVisible:false,
      addressInfo: {userId: "",
        username: "",
        telephone: "",
        detailAddress: "",
        postCode: "",
        defaultStatus: 2},
    // 订单中的商品的id
    goodsIds:[]
    };
  },
  created() {
    this.getAddressInfo()
    console.log("Dd") 
  },
   components:{
    VDistpicker
  },
  computed: {
    // 结算的商品数量; 结算商品总计; 结算商品信息
    ...mapGetters(["getBuyGoodsList", "getTotalPrice","getShopcarNumber"])
  },
  methods: { 
    ...mapActions(["setShopcarNumber","setTotalPrice","setBuyGoodsList"]),
     async  getAddressInfo(){
      const {data:res} = await this.$http.get("xuanmall/wzxuseraddress/info")
      console.log(res);
      if(res.msg === 'success'){
        res.userAddress.forEach(item =>{
         if(item.defaultStatus === 1){
           this.confirmAddress = item.id
         }
          item.city = item.city.split(' ')
        })
        this.address = res.userAddress;
      }
      // console.log(this.address)
    },
     // 选择城市信息
    selectCity(provence){
      this.addressInfo.city = provence.province.value + ' '+ provence.city.value + ' ' +provence.area.value
    }, 
    handle(id){
      // console.log("id",id)
      this.confirmAddress = id
    },
    // 添加地址关闭
    changDdialogAddVisible(){
      this.addressInfo = {}
      this.dialogAddVisible = false
      //清除所有校验
      this.$refs.addressInfo.resetFields()
    },
      // 添加新地址
    async onSubmit() {
      // console.log("添加地址");
      this.addressInfo.userId = this.$store.getters.getUser.id
      const { data: res } = await this.$http.post(
        "xuanmall/wzxuseraddress/save",
        this.addressInfo
      );
      // console.log(res)
      if (res.msg === "success") {
        this.$message.success("添加成功");
        this.getAddressInfo()  
      }
      else{
        this.$message.error("添加失败");
      }
      this.addressInfo = {}
        this.dialogAddVisible = false
    },
    async  getUpOrder() {
      const {data:res} = await this.$http.post("/xuanmall/order/save",{
          price:this.getTotalPrice,
          item:this.getBuyGoodsList,
          userAddressId : this.confirmAddress
      })
      // console.log("this",res)
      if(res.code !== 0)return this.$message.error("订单提交失败")
      this.goodsIds = []
       this.getBuyGoodsList.forEach(value =>{
        this.goodsIds.push(value.id)
      })
      //订单提交完成则更新库存
      this.getBuyGoodsList.forEach(async(value) =>{
        const {data:res2} = await this.$http.post('/xuanmall/skumessage/update',{
         skuId:value.skuid,
         stockCount: value.stockCount - value.count,
       })
       if(res2.code !== 0)return this.$message.error("商品库存更新失败")
      })
      // 订单添加完则删除购物车中的信息
       const { data: res1 } = await this.$http.post("/xuanmall/cart/delete", this.goodsIds);
      // console.log(res1);
      if (res1.code !== 0) return  this.$message.error("购物车删除失败");
      var shopNumber = this.getShopcarNumber - this.goodsIds.length
      this.setShopcarNumber(shopNumber)
      cookie.set("shopcarNumber", shopNumber, { domain: "localhost" });
      this.setTotalPrice("")
      this.setBuyGoodsList("")

      this.payDialogVisible = true
    },
    toOrder(){
      this.payDialogVisible = false
      this.$router.push("/order")
    }
  }
};
</script>
<style scoped>
.confirmOrder {
  background-color: #f5f5f5;
  padding-bottom: 20px;
}
/* 头部CSS */
.confirmOrder .confirmOrder-header {
  background-color: #fff;
  border-bottom: 2px solid #ff6700;
  margin-bottom: 20px;
}
.confirmOrder .confirmOrder-header .header-content {
  width: 1225px;
  margin: 0 auto;
  height: 80px;
}
.confirmOrder .confirmOrder-header .header-content p {
  float: left;
  font-size: 28px;
  line-height: 80px;
  color: #424242;
  margin-right: 20px;
}
.confirmOrder .confirmOrder-header .header-content p i {
  font-size: 45px;
  color: #ff6700;
  line-height: 80px;
}
/* 头部CSS END */

/* 主要内容容器CSS */
.confirmOrder .content {
  width: 1225px;
  margin: 0 auto;
  padding: 48px 0 0;
  background-color: #fff;
}

/* 选择地址CSS */
.confirmOrder .content .section-address {
  margin: 0 48px;
  overflow: hidden;
}
.confirmOrder .content .section-address .title {
  color: #333;
  font-size: 18px;
  line-height: 20px;
  margin-bottom: 20px;
}
.confirmOrder .content .address-body li {
  float: left;
  color: #333;
  width: 220px;
  height: 138px;
  border: 1px solid #e0e0e0;
  padding: 15px 24px 0;
  margin-right: 17px;
  margin-bottom: 24px;
}
.confirmOrder .content .address-body .in-section {
  border: 1px solid #ff6700;
}
.confirmOrder .content .address-body li h2 {
  font-size: 18px;
  font-weight: normal;
  line-height: 30px;
  margin-bottom: 10px;
}
.confirmOrder .content .address-body li p {
  font-size: 14px;
  color: #757575;
}
.confirmOrder .content .address-body li .address {
  padding: 10px 0;
  max-width: 180px;
  max-height: 88px;
  line-height: 22px;
  overflow: hidden;
}
.confirmOrder .content .address-body .add-address {
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}
.confirmOrder .content .address-body .add-address i {
  font-size: 30px;
  padding-top: 50px;
  text-align: center;
}
/* 选择地址CSS END */

/* 商品CSS */
.confirmOrder .content .section-goods {
  margin: 0 48px;
}
.confirmOrder .content .section-goods p.title {
  color: #333;
  font-size: 18px;
  line-height: 40px;
}
.confirmOrder .content .section-goods .goods-list {
  padding: 5px 0;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}
.confirmOrder .content .section-goods .goods-list li {
  padding: 10px 0;
  color: #424242;
  overflow: hidden;
  text-align: center;
}
.confirmOrder .content .section-goods .goods-list li img {
  float: left;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  margin-left: 80px;
}
.confirmOrder .content .section-goods .goods-list li .pro-name {
  float: left;
  width: 450px;
  line-height: 30px;
}
.confirmOrder .content .section-goods .goods-list li .pro-price {
  float: left;
  width: 200px;
  text-align: center;
  line-height: 30px;
}
/* .confirmOrder .content .section-goods .goods-list li .pro-status {
  float: left;
  width: 99px;
  height: 30px;
  text-align: center;
  line-height: 30px;
} */
.confirmOrder .content .section-goods .goods-list li .pro-total {
  float: left;
  width: 220px;
  text-align: center;
  color: #ff6700;
  line-height: 30px;
}
/* 商品CSS END */

/* 配送方式CSS */
.confirmOrder .content .section-shipment {
  margin: 0 48px;
  padding: 25px 0;
  border-bottom: 1px solid #e0e0e0;
  overflow: hidden;
}
.confirmOrder .content .section-shipment .title {
  float: left;
  width: 150px;
  color: #333;
  font-size: 18px;
  line-height: 38px;
}
.confirmOrder .content .section-shipment .shipment {
  float: left;
  line-height: 38px;
  font-size: 14px;
  color: #ff6700;
}
/* 配送方式CSS END */


/* 结算列表CSS */
.confirmOrder .content .section-count {
  margin: 0 48px;
  padding: 20px 0;
  overflow: hidden;
}
.confirmOrder .content .section-count .money-box {
  float: right;
  text-align: right;
}
.confirmOrder .content .section-count .money-box .title {
  float: left;
  width: 126px;
  height: 30px;
  display: block;
  line-height: 30px;
  color: #757575;
}
.confirmOrder .content .section-count .money-box .value {
  float: left;
  min-width: 105px;
  height: 30px;
  display: block;
  line-height: 30px;
  color: #ff6700;
}
.confirmOrder .content .section-count .money-box .total .title {
  padding-top: 15px;
}
.confirmOrder .content .section-count .money-box .total .value {
  padding-top: 10px;
}
.confirmOrder .content .section-count .money-box .total-price {
  font-size: 30px;
}
/* 结算列表CSS END */

/* 结算导航CSS */
.confirmOrder .content .section-bar {
  padding: 20px 48px;
  border-top: 2px solid #f5f5f5;
  overflow: hidden;
}
.confirmOrder .content .section-bar .btn {
  float: right;
}
.confirmOrder .content .section-bar .btn .btn-base {
  float: left;
  margin-left: 30px;
  width: 158px;
  height: 38px;
  border: 1px solid #b0b0b0;
  font-size: 14px;
  line-height: 38px;
  text-align: center;
}
.confirmOrder .content .section-bar .btn .btn-return {
  color: rgba(0, 0, 0, 0.27);
  border-color: rgba(0, 0, 0, 0.27);
}
.confirmOrder .content .section-bar .btn .btn-primary {
  background: #ff6700;
  border-color: #ff6700;
  color: #fff;
}
/* 结算导航CSS */

/* 主要内容容器CSS END */
</style>